const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin 需要下载

const Mock = require("mockjs");
const data = Mock.mock({
    "list|10": [{
        img: "@Image(100x100,@color)",
        title: "@ctitle",
        phone: /^1[3-9]\d{9}$/,
        id:"@id",
    }]
})


module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, './dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
    ],
    mode:"development",
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: "file-loader",
                }]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
        ]
    },
    devServer: {
        host: "localhost",
        port: 8081,
        hot: true,
        open: true,
        before(app) {//在整个服务过程之前
            app.get("/list", (req, res) => {
                res.send(data.list);
            })
            app.get("/detail", (req, res) => {
                res.send(data.list[0]);
            })
        }
    }

}